<template>
  <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body :before-close="close">
    <el-form ref="form" :model="form" label-width="100px" class="demo-ruleForm">
      <el-row>
        <el-col :span="8">
          <el-form-item label="运输模式" prop="carpooling_type">
            <el-select v-model="form.carpooling_type" placeholder="请选择" style="width: 100%;">
              <el-option
                v-for="item in carpooling_type_option"
                :key="item.value"
                :label="item.label"
                :value="item.label">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车型要求" prop="vehicle_type" v-show="form.carpooling_type == '整车'">
            <el-select v-model="form.vehicle_type" placeholder="请选择" style="width: 100%;">
              <el-option
                v-for="item in vehicle_type_option"
                :key="item.value"
                :label="item.label"
                :value="item.label">
              </el-option>
            </el-select>
<!--            <el-input v-model="form.vehicle_type" />-->
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车号" prop="wagon_number">
            <el-input v-model="form.wagon_number" />
          </el-form-item>
        </el-col>
<!--        <el-col :span="8">-->
<!--          <el-form-item label="送货方式" prop="delivery_type">-->
<!--            <el-input v-model="form.delivery_type" />-->
<!--          </el-form-item>-->
<!--        </el-col>-->
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="提货时间" prop="carry_goods_date">
            <el-date-picker v-model="form.carry_goods_date" value-format="yyyy-MM-dd" type="date" placeholder="提货时间" style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="送货时间" prop="delivery">
            <el-date-picker v-model="form.delivery" value-format="yyyy-MM-dd" type="date" placeholder="送货时间" style="width: 100%;" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="目的地" prop="destination">
            <el-input v-model="form.destination" />
          </el-form-item>
        </el-col>
<!--        <el-col :span="8">-->
<!--          <el-form-item label="运输备注" prop="remarks">-->
<!--            <el-input v-model="form.remarks" />-->
<!--          </el-form-item>-->
<!--        </el-col>-->
        <el-col :span="8">
          <el-form-item label="起运时间" prop="departure_date">
            <el-date-picker v-model="form.departure_date" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="起运时间" style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="起运地" prop="departure_address">
            <el-input v-model="form.departure_address" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="箱型" prop="box_type_volume">
            <el-select v-model="form.box_type_volume" placeholder="请选择" style="width: 100%;">
              <el-option
                v-for="item in box_type_volume_option"
                :key="item.value"
                :label="item.label"
                :value="item.label">
              </el-option>
            </el-select>
<!--            <el-input v-model="form.box_type_volume" />-->
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="箱量" prop="box_num">
            <el-input v-model="form.box_num" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="集装箱号" prop="container_code">
            <el-input v-model="form.container_code" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
<!--        <el-col :span="8">-->
<!--          <el-form-item label="车辆类型" prop="car_type">-->
<!--            <el-input v-model="form.car_type" />-->
<!--          </el-form-item>-->
<!--        </el-col>-->
        <el-col :span="8">
          <el-form-item label="司机姓名" prop="driver_telephone">
            <el-input v-model="form.driver_name" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="司机电话" prop="driver_telephone">
            <el-input v-model="form.driver_telephone" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="身份证号" prop="IDCard">
            <el-input v-model="form.IDCard" />
          </el-form-item>
        </el-col>

      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="门点地址" prop="gate_address">
            <el-input v-model="form.gate_address" />
          </el-form-item>
        </el-col>
<!--        <el-col :span="8">-->
<!--          <el-form-item label="单位名称" prop="unit_name">-->
<!--            <el-input v-model="form.unit_name" />-->
<!--          </el-form-item>-->
<!--        </el-col>-->
        <el-col :span="8">
          <el-form-item label="运单状态" prop="waybill_status">
            <el-select v-model="form.waybill_status" placeholder="运单状态" clearable style="width: 100%">
              <el-option label="NEW" value="1" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="运输公司" prop="settlement_company">
            <el-select v-model="form.transport_company" filterable placeholder="运输公司" clearable style="width: 100%" @change="getMation">
              <el-option
                v-for="(dict,index) in transport_company_option"
                :key="index"
                :label="dict.account_name"
                :value="dict.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系人" prop="contacts">
            <el-input v-model="form.contacts" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="电话" prop="phone">
            <el-input v-model="form.phone" />
          </el-form-item>
        </el-col>

<!--        <el-col :span="8">-->
<!--          <el-form-item label="状态时间" prop="status_date">-->
<!--            <el-date-picker v-model="form.status_date" value-format="yyyy-MM-dd" type="date" placeholder="状态时间" style="width: 100%;" />-->
<!--          </el-form-item>-->
<!--        </el-col>-->
      </el-row>

      <el-row>
<!--        <el-col :span="8">-->
<!--          <el-form-item label="运输要求" prop="transport_ask">-->
<!--            <el-input v-model="form.transport_ask" />-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="8">-->
<!--          <el-form-item label="通关点地址" prop="clearance_address">-->
<!--            <el-input v-model="form.clearance_address" />-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="8">-->
<!--          <el-form-item label="取单地址" prop="take_order_address">-->
<!--            <el-input v-model="form.take_order_address" />-->
<!--          </el-form-item>-->
<!--        </el-col>-->
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="运单备注" prop="waybill_remarks">
            <el-input v-model="form.waybill_remarks" type="textarea" placeholder="请输入备注" autocomplete="off" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="top: 30px;margin-bottom: 30px;text-align:center;">
        <el-col :span="24">
          <el-button type="primary" size="medium" @click="submitForm('form')">{{ title }}</el-button>
          <el-button size="medium" @click="close()">取消</el-button>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>
<script>
import { getProvider } from '@/api/basics'
export default {
  name: 'Transport',
  props: {
    open: {
      type: Boolean
    },
    form: {
      type: Object
    },
    title: {
      type: String
    },
    tableData: {
      type: Array
    }
  },
  data() {
    return {
      carpooling_type_option:[
        {
          value: '1',
          label: '整车'
        },
        {
          value: '2',
          label: '拼车'
        },
      ],
      vehicle_type_option:[
        {
          value: '1',
          label: '4米2'
        },
        {
          value: '2',
          label: '9米6'
        },
        {
          value: '3',
          label: '7米6'
        },
        {
          value: '4',
          label: '12米5'
        },
        {
          value: '5',
          label: '17米5'
        },
        {
          value: '6',
          label: '集装箱车'
        },
        {
          value: '7',
          label: '面包车'
        }
      ],
      box_type_volume_option:[
        {
          value:'1',
          label:'20GP'
        },
        {
          value:'2',
          label:'40GP'
        },
        {
          value:'3',
          label:'40HQ'
        },
        {
          value:'4',
          label:'20OT'
        },
        {
          value:'5',
          label:'40OT'
        },
        {
          value:'6',
          label:'框架箱'
        },
        {
          value:'7',
          label:'冷藏箱'
        },
      ],
      transport_company_option:[],
    }
  },
  watch: {
    'form': function(newValue, oldValue) {
      if (this.title == '编辑') {
        if(this.form.transport_company){
          this.getMation()
        }
      }
    }
  },
  created(){
    this.providerList()
  },
  methods: {
    getMation(){
        this.transport_company_option.forEach((item)=>{
          if(this.form.transport_company == item.id){
            this.form.contacts = item.relation_name
            this.form.phone = item.relation_phone
          }
        })
    },
    submitForm(formName) {
      const that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (that.title === '添加') {
            this.add()
          } else {
            this.edit()
          }
        } else {
          return false
        }
      })
    },
    add() {
      console.log(this.tableData)
      this.form.key = this.tableData.length + 1
      this.tableData.push(this.form)
      this.close()
    },
    edit() {
      this.close()
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    close() {
      this.$emit('update:open', false)
    },
    providerList() {
      getProvider({ role: '12' }).then(response => {
        if (response.code === 10000) {
          this.transport_company_option = response.data
        }
      })
    }
  }
}
</script>
